<template>
  <div class="tzl_test">
    <div class="form_item" style="width: 300px">
      <h5>tag</h5>
      <h6>tag 基础组件</h6>
      <tag-base v-model="tagBaseValue"></tag-base>

      <h6>tag 靠左</h6>
      <tag-left
        v-model="tagLeftValue"
        bgColor="#e9e9eb"
        :fontStyle="fontStyle"
        :row="leftRow"
        @itemEvent="itemEvent"
      ></tag-left>

      <h6>tag 居中</h6>
      <tag-center
        :options="options"
        :row="row"
        :itemConfig="centerConfig"
        v-model="tagCenterValue"
      ></tag-center>
    </div>
  </div>
</template>

<script setup>
import TagBase from '@/components/tag/TagBase.vue';
import TagCenter from '@/components/tag/TagCenter.vue';
import TagLeft from '@/components/tag/TagLeft.vue';

const tagBaseValue = $ref('12444');
const tagLeftValue = $ref('left');
const tagCenterValue = $ref('center');

const options = $ref([
  { color: '#f56c6c', bgColor: '#fde2e2', value: '1' },
  { color: '#e6a23c', bgColor: '#f8e3c5', value: '2' },
  { type: 'success', value: '3' },
]);

const row = $ref({
  status: '3',
});
const leftRow = $ref({
  test: '1234',
  demo: '777',
});

const fontStyle = $ref({
  color: '#909399',
});

const centerConfig = $ref({
  codeName: 'status',
});

function itemEvent(data) {
  console.log(data, 'datdadad');
}
</script>
<style lang="scss" scoped>
h5 {
  font-size: 16px;
}
h6 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  position: relative;
  padding-left: 6px;
}
h6::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 15px;
  display: block;
  background: #409eff;
  top: 2px;
  left: 0;
}
.tzl_test {
  margin: 20px;
}
.get_file {
  margin: 20px;
}
</style>
